<template>
<view>
	
	<view v-if="listcount<=4||(listcount>4&&categoryid!=1&&categoryid!=8)" :class="listcount==1?'flexed12':listcount<=4?'flexed6':'flexed12'">
		<view  v-for='(item,index) in druglist.list' :key='index'>
		<view v-if="item.cover!=null" class="flexedfull">
			<u--image :src="item.cover" width="100%" height="260px" radius="6"
			@click="$Router.push({path: '/pages/componentsA/durg/archiveinfo', query: {aid: item.aid}})"></u--image>
			<view class="title">{{item.name}}</view>
		</view>
		<view v-else>
			<view class="boxtype">
				<u--text :text="item.name" size="20" align="center" color="#D8BFD8" lineHeight="40"
				@click="$Router.push({path: '/pages/componentsA/durg/archiveinfo', query: {aid: item.aid}})"></u--text>
			</view>
		</view>
		</view>
	</view>
	<view v-if="listcount>4 && listcount<=20&&(categoryid==1||categoryid==8)">
			<view class="fixed-2list">
				<ul>
				<view v-for='(item,index) in druglist.list' :key='index'>
					<li v-if="item.cover!=null">
						<u--image :src="item.cover" width="100%" height="180px" radius="6"
						@click="$Router.push({path: '/pages/componentsA/durg/archiveinfo', query: {aid: item.aid}})"></u--image>
						<view class="title u-m-b-10">{{item.name}}</view>
					</li>
				</view>
				
				</ul><view class="clear"></view>
			</view>
	</view>
	<view v-if="listcount>20&&(categoryid==1||categoryid==8)">
			<view class="fixed-4list">
				<ul>
				<view v-for='(item,index) in druglist.list' :key='index'>
					<li v-if="item.cover!=null">
						<u--image :src="item.cover" width="100%" height="90px" radius="6"
						@click="$Router.push({path: '/pages/componentsA/durg/archiveinfo', query: {aid: item.aid}})"></u--image>
						<view class="title u-m-b-10">{{item.name}}</view>
					</li>
				</view>
				</ul><view class="clear"></view>
			</view>
	</view>

	<view class="u-error u-font-xs u-flex-y u-flex-middle u-padding-20" v-if="listcount>40">
		<view @click="$Router.push({path: '/pages/componentsA/durg/taglist', query: {categoryid: categoryid,name:tagname}})">还有{{listcount-40}}个已折叠，点击查看更多>>></view>
	</view>

</view>
</template>

<script>
	export default {
		props: {
			druglist:{
				list:[]
			},
			listcount: '',
			categoryid:'',
			tagname:''
		},
		methods:{

		}
	};
</script>
<style lang="scss" scoped>
	.flexedfull{
		border: #eee solid 1px;
		border-radius: 7px;
		position: relative;
		margin-bottom: 10px;
		.title{
			position: absolute;
			bottom:0px;
			height: 40px;width: 100%;
			background: linear-gradient(96.25deg, #2B937C 20.55%, #54ECD7 78.85%);
			color:#fff;
			opacity:0.8;
			font-size: 20px;
			text-align: center;
			line-height: 40px;
			border-radius: 0px 0px 6px 6px;
		}
	}
	.fixed-2list {
		ul{
			padding: 0px;margin: 0px;
			li{
				width: 48%;float: left;margin-right: 2%;
				.title{width: 100%;overflow: hidden;text-align: center;}
			}
			li:nth-child(2n){margin: 0px;}
		}
	}
	.fixed-4list {
		ul{
			padding: 0px;margin: 0px;
			li{
				width: 23%;float: left;margin-right: 2%;
				.title{width: 100%;overflow: hidden;text-align: center;}
			}
			li:nth-child(4n){margin: 0px;width: 25%;}
		}
	}
	.boxtype{border: #BA55D3 solid 2px; border-radius: 4px; margin: 8px auto;width: 100%; background: #4B0082;}
	
//协助换行
.clear{clear: both;height: 0;}
.clear:before,.clear:after{content:"";display:table;font:0/0 a;}
.clear:after{clear:both;}
</style>
